<template>
  <div class="paymentApply">
    <Card>
      <p slot="title">批量代付</p>
      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg"><record-list v-for="(item, index) in recordData" :key="index" :item="item"></record-list></Row>
      </div>
      <Form ref="form" :model="form" :rules="rules">
        <Table id="mybody" border :columns="allColumns" :data="form.data">
          <template slot-scope="{ row, index }" slot="account_name">
            <FormItem :rules="rules.account_name" :prop="`data.${index}.account_name`">
              <Input placeholder="请输入开户名" type="text" v-model="form.data[index].account_name" />
            </FormItem>
          </template>
          <template slot-scope="{ row, index }" slot="account">
            <FormItem :rules="rules.account" :prop="`data.${index}.account`"><Input placeholder="请输入账号" type="text" v-model="form.data[index].account" number /></FormItem>
          </template>
          <template slot-scope="{ row, index }" slot="bank_name">
            <FormItem :rules="rules.bank_name" :prop="`data.${index}.bank_name`"><Input placeholder="请输入银行名称" type="text" v-model="form.data[index].bank_name" /></FormItem>
          </template>
          <template slot-scope="{ row, index }" slot="issue_money">
            <FormItem :rules="rules.issue_money" :prop="`data.${index}.issue_money`">
              <Input placeholder="请输入金额" type="text" v-model="form.data[index].issue_money" number />
            </FormItem>
          </template>
        </Table>

        <Form-item prop="pay_pwd" :label-width="100" label="支付密码" v-show="payMode === 0 || payMode === 2" style="margin-top: 25px;">
          <i-input style="width: 20%;" type="password" v-model="form.pay_pwd" placeholder="请输入密码"></i-input>
        </Form-item>

        <Form-item prop="vcode" :label-width="100" label="谷歌验证码" v-show="payMode === 1 || payMode === 2" style="margin-top: 25px;">
          <i-input style="width: 20%;" v-model="form.vcode" placeholder="谷歌验证码"></i-input>
        </Form-item>
        <div style="height: 30px;"></div>
        <Form-item :label-width="80"><i-button class="com-btm" :loading="loading" @click="validate">提交申请</i-button></Form-item>
      </Form>
    </Card>
  </div>
</template>

<script>
import { createdpaid,getUserInfo } from '@/api/user';
import $ from 'jquery';
import RecordList from '@/components/record-list/record-list.vue';
let testData = {
  histories: [
    {
      account_name: '',
      account: '',
      bank_name: '',
      issue_money: ''
    }
  ]
};
const noNull = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('必须项不能为空'));
  }
  // 模拟异步验证效果
  setTimeout(() => {
    callback();
  });
};

const banknum = async (rule, value, callback) => {
  let num = /^([1-9]{1})(\d{14}|\d{18})$/;
  if (!value) {
    return callback(new Error('银行卡不能为空'));
  } else if (!Number.isInteger(value)) {
    callback(new Error('只能填写数字哦'));
    // } else if (!num.test(value)) {
    //   return callback(new Error('银行卡号输入有误，请检查是否正确！'))
  } else {
    callback();
  }
};
const validateMoney = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('金额不能为空'));
  }
  // 模拟异步验证效果
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('只能填写数字哦'));
    } else {
      callback();
    }
  });
};
export default {
  // name: 'payment-apply',
  components: {
    RecordList
  },
  data() {
    return {
      changeFlag: 0,
      rules: {
        account_name: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],
        account: [
          {
            validator: banknum,
            trigger: 'blur'
          }
        ],
        bank_name: [
          {
            validator: noNull,
            trigger: 'blur'
          }
        ],
        issue_money: [
          {
            validator: validateMoney,
            trigger: 'blur'
          }
        ]
      },
      loading:false,
      form: {
        uid: this.$store.state.user.userInfo.uid,
        data: testData.histories,
        pay_pwd: '',
        vcode: '',
        channel: 'pt'
      },
      recordData: [
        {
          title: '可申请代付金额：',
          num: 0,
          color: '#FD2424',
          unit: '元'
        }
      ],
      allColumns: [
        {
          title: '开户名',
          key: 'account_name',
          width: 220,
          slot: 'account_name'
        },
        {
          title: '银行账号(卡号)',
          key: 'account',
          width: 300,
          slot: 'account'
        },
        {
          title: '银行名称',
          key: 'bank_name',
          width: 220,
          slot: 'bank_name'
        },
        {
          title: '下发金额',
          width: 220,
          key: 'issue_money',
          slot: 'issue_money'
        },
        {
          title: '操作',
          minWidth: 200,
          key: 'action',
          render: (h, params) => {
            if (params.index == 0) {
              return h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    backgroundColor: '#009688',
                    color: 'white',
                    fontSize: '14PX',
                    height: '30px'
                  },
                  nativeOn: {
                    click: () => {
                      this.tblRowAdd(params.index);
                    }
                  }
                },
                '增加'
              );
            } else {
              return h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    backgroundColor: '#FF5722',
                    color: 'white',
                    fontSize: '14PX',
                    height: '30px'
                  },
                  nativeOn: {
                    click: () => {
                      this.tblRowAdd(params.index);
                    }
                  }
                },
                '删除'
              );
            }
          }
        }
      ],
      payMode: this.$store.state.user.userInfo.pay_safemode
    };
  },
  mounted() {
    this.payModeinit();
    this.getUserData();
  },
  methods: {
    getUserData () {
      getUserInfo(this.$store.state.user.userInfo.uid)
        .then(res => {
          const data = res.data
          this.recordData[0].num=data.paid_money
          this.payMode=data.pay_safemode
          this.$store.commit('UPDATE_USERINFO', data)

        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    payModeinit() {
      if (this.payMode === 0) {
        this.rules.pay_pwd = {
          required: true,
          message: '请填写支付密码',
          trigger: 'blur'
        };
      }
      if (this.payMode === 1) {

        this.rules.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        };
      }
      if (this.payMode === 2) {
        this.rules.pay_pwd = {
          required: true,
          message: '请填写支付密码',
          trigger: 'blur'
        };
        this.rules.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        };
      }
    },
    validate() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading=!this.loading
          createdpaid(this.form)
            .then(res => {
              this.$Message.success(res.msg);
              this.getUserData()
              console.log(this.$store.state.user.userInfo.paid_money)
              this.loading=!this.loading
            })
            .catch(err => {
              this.$Message.error(err.msg);
              this.loading=!this.loading
            });
        } else {
          this.$Message.error('表单验证失败！');
        }
      });
    },

    // 添加一行的方法
    tblRowAdd(index) {
      if (index === 0) {
        let row = this.form.data[0];
        let newRow = JSON.parse(JSON.stringify(row));
        for (let key in newRow) {
          newRow[key] = '';
        }
        this.form.data.push(newRow);
      } else {
        this.form.data.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.paymentApply .ivu-form .ivu-form-item-label {
  font-size: 14px;
}

.paymentApply .ivu-form-inline .ivu-form-item {
  width: 100%;
}
.paymentApply .ivu-table td {
  height: 88px;
}
.paymentApply .ivu-table-cell {
  overflow: visible;
}
.paymentApply .ivu-tag {
  background: #ff5722 none repeat scroll 0% 0%;
  border-width: 1px;
  border-color: #ff5722;
  border-style: solid;
  color: #fff !important;
}

.paymentApply .ivu-tag span {
  color: #fff;
}

.paymentApply .ivu-form-item {
  margin: 0px;
}
</style>
